Frontend Monorepo: Управление на работни пространства с Lerna и Nx

В непрекъснато развиващия се пейзаж на frontend разработката, управлението на големи и сложни проекти може да бъде значително предизвикателство. Традиционните настройки с множество хранилища, макар и да предлагат изолация, могат да доведат до дублиране на код, главоболия при управлението на зависимости и непоследователни инструменти. Тук архитектурата monorepo блести. Monorepo е единично хранилище, съдържащо множество проекти, често свързани, които се изграждат и версиират заедно. Този подход предлага многобройни предимства, но ефективното управление на monorepo изисква специализирани инструменти. Тази статия разглежда две популярни решения: Lerna и Nx.

Какво е Monorepo?

Monorepo е хранилище за система за контрол на версиите, което съдържа код за много проекти. Тези проекти могат да бъдат свързани или напълно независими. Ключът е, че те споделят едно и също хранилище. Компании като Google, Facebook, Microsoft и Uber успешно са възприели monorepos, за да управляват своите масивни кодови бази. Представете си Google, които съхраняват почти целия си код, включително Android, Chrome и Gmail, в едно хранилище.

Предимства на Monorepo

• Споделяне и повторно използване на код: Лесно споделяйте код между проекти без сложни работни процеси за пакетиране и публикуване. Представете си библиотека със система за дизайн, която може да бъде безпроблемно интегрирана в множество приложения в рамките на едно и също хранилище.
• Опростено управление на зависимости: Управлявайте зависимостите на едно място, осигурявайки последователност във всички проекти. Актуализирането на зависимостта на споделена библиотека автоматично актуализира всички проекти, които зависят от нея.
• Атомарни промени: Правете промени, които обхващат множество проекти в един единствен коммит, осигурявайки последователност и опростяване на тестването. Например, рефакториране, което засяга както frontend, така и backend, може да бъде извършено атомарно.
• Подобрено сътрудничество: Екипите могат лесно да си сътрудничат по различни проекти в рамките на едно и също хранилище, насърчавайки споделянето на знания и междуфункционалното развитие. Разработчиците могат лесно да преглеждат и разбират код в различни екипи.
• Последователни инструменти и практики: Налагайте последователни стандарти за кодиране, правила за линтинг и процеси на изграждане във всички проекти. Това подобрява качеството на кода и поддръжката.
• Опростено рефакториране: Мащабните проекти за рефакториране са опростени, тъй като целият свързан код е в рамките на едно и също хранилище. Автоматизираните инструменти за рефакториране могат да се използват в цялата кодова база.

Предизвикателства на Monorepo

• Размер на хранилището: Monorepos могат да станат много големи, което потенциално забавя клонирането и индексирането. Инструменти като `git sparse-checkout` и `partial clone` могат да помогнат за смекчаване на този проблем.
• Време за компилиране: Компилирането на целия monorepo може да отнеме много време, особено за големи проекти. Инструменти като Lerna и Nx предлагат оптимизирани процеси на изграждане, за да се справят с това.
• Контрол на достъпа: Ограничаването на достъпа до определени части на monorepo може да бъде сложно. Изисква се внимателно планиране и прилагане на механизми за контрол на достъпа.
• Сложност на инструментите: Настройването и управлението на monorepo изисква специализирани инструменти и знания. Кривата на обучение може да бъде стръмна в началото.

Lerna: Управление на JavaScript проекти в Monorepo

Lerna е популярен инструмент за управление на JavaScript проекти в monorepo. Той оптимизира работния процес около управлението на хранилища с множество пакети с Git и npm. Той е особено подходящ за проекти, които използват npm или Yarn за управление на зависимости.

Основни характеристики на Lerna

• Управление на версии: Lerna може автоматично да версиира и публикува пакети въз основа на промени, направени след последното издание. Той използва конвенционални коммитове, за да определи следващия номер на версията.
• Управление на зависимости: Lerna обработва зависимости между пакети, като гарантира, че пакетите в рамките на monorepo могат да зависят един от друг. Той използва символни връзки, за да създаде локални зависимости.
• Изпълнение на задачи: Lerna може да изпълнява команди в множество пакети паралелно, ускорявайки процесите на компилиране и тестване. Той поддържа изпълнението на скриптове, дефинирани в `package.json`.
• Откриване на промени: Lerna може да открие кои пакети са се променили след последното издание, което позволява целеви компилации и внедрявания.

Пример за използване на Lerna

Нека илюстрираме използването на Lerna с опростен пример. Да предположим, че имаме monorepo с два пакета: `package-a` и `package-b`. `package-b` зависи от `package-a`.

monorepo/
├── lerna.json
├── package.json
├── packages/
│   ├── package-a/
│   │   ├── package.json
│   │   └── index.js
│   └── package-b/
│       ├── package.json
│       └── index.js

1. Инициализирайте Lerna:

lerna init

Това създава `lerna.json` и актуализира корена `package.json`. Файлът `lerna.json` конфигурира поведението на Lerna.

2. Инсталирайте зависимости:

npm install
# или
yarn install

Това инсталира зависимости за всички пакети в monorepo, въз основа на файловете `package.json` във всеки пакет.

3. Изпълнете команда в пакети:

lerna run test

Това изпълнява скрипта `test`, дефиниран във файловете `package.json` на всички пакети, които го имат дефиниран.

4. Публикувайте пакети:

lerna publish

Тази команда анализира историята на коммитите, определя кои пакети са се променили, увеличава техните версии въз основа на конвенционалните коммитове и ги публикува в npm (или избрания от вас регистър).

Конфигурация на Lerna

Файлът `lerna.json` е сърцето на конфигурацията на Lerna. Той ви позволява да персонализирате поведението на Lerna, като например:

• `packages`: Указва местоположението на пакетите в рамките на monorepo. Често се задава на `["packages/*"]`.
• `version`: Указва стратегията за версииране. Може да бъде `independent` (всеки пакет има своя собствена версия) или фиксирана версия.
• `command`: Позволява ви да конфигурирате опции за конкретни команди на Lerna, като например `publish` и `run`.

Пример за `lerna.json`:

{
  "packages": [
    "packages/*"
  ],
  "version": "independent",
  "npmClient": "npm",
  "useWorkspaces": true,
  "command": {
    "publish": {
      "conventionalCommits": true,
      "message": "chore(release): publish"
    }
  }
}

Nx: Интелигентна, бърза и разширяема система за изграждане

Nx е мощна система за изграждане, която предоставя разширени функции за управление на monorepo. Той се фокусира върху инкременталните компилации, кеширането на изчисленията и оркестрацията на задачите, за да подобри значително времето за компилиране и производителността на разработчиците. Докато Lerna е фокусиран предимно върху управлението на пакети, Nx предоставя по-всеобхватен подход за управление на целия работен процес на monorepo, включително генериране на код, линтинг, тестване и внедряване.

Основни характеристики на Nx

• Инкрементални компилации: Nx анализира графика на зависимостите на вашите проекти и компилира само проектите, които са се променили след последната компилация. Това драстично намалява времето за компилиране.
• Кеширане на изчисленията: Nx кешира резултатите от задачи, като например компилации и тестове, така че те да могат да бъдат използвани повторно, ако входовете не са се променили. Това допълнително ускорява циклите на разработка.
• Оркестрация на задачи: Nx предоставя мощна система за оркестрация на задачи, която ви позволява да дефинирате сложни тръбопроводи за изграждане и да ги изпълнявате ефективно.
• Генериране на код: Nx предоставя инструменти за генериране на код, които могат да ви помогнат бързо да създавате нови проекти, компоненти и модули, следвайки най-добрите практики и последователни стандарти.
• Екосистема от плъгини: Nx има богата екосистема от плъгини, която поддържа различни технологии и рамки, като React, Angular, Node.js, NestJS и други.
• Визуализация на графика на зависимостите: Nx може да визуализира графика на зависимостите на вашето monorepo, което ви помага да разберете взаимоотношенията между проектите и да идентифицирате потенциални проблеми.
• Засегнати команди: Nx предоставя команди за изпълнение на задачи само върху проектите, които са засегнати от конкретна промяна. Това ви позволява да фокусирате усилията си върху областите, които се нуждаят от внимание.

Пример за използване на Nx

Нека илюстрираме използването на Nx с опростен пример. Ще създадем monorepo с React приложение и Node.js библиотека.

1. Инсталирайте Nx CLI глобално:

npm install -g create-nx-workspace

2. Създайте ново работно пространство на Nx:

create-nx-workspace my-monorepo --preset=react
cd my-monorepo

Това създава ново работно пространство на Nx с React приложение. Опцията `--preset=react` казва на Nx да инициализира работното пространство със специфични за React конфигурации.

3. Генерирайте библиотека:

nx generate @nrwl/node:library my-library

Това генерира нова Node.js библиотека, наречена `my-library`. Nx автоматично конфигурира библиотеката и нейните зависимости.

4. Компилирайте приложението:

nx build my-app

Това компилира React приложението. Nx анализира графика на зависимостите и компилира само необходимите файлове.

5. Изпълнете тестове:

nx test my-app

Това изпълнява модулните тестове за React приложението. Nx кешира резултатите от тестовете, за да ускори последващите изпълнения на тестовете.

6. Прегледайте графика на зависимостите:

nx graph

Това отваря уеб интерфейс, който визуализира графика на зависимостите на monorepo.

Конфигурация на Nx

Nx се конфигурира чрез файла `nx.json`, който се намира в корена на работното пространство. Този файл дефинира проектите в работното пространство, техните зависимости и задачите, които могат да бъдат изпълнени върху тях.

Ключови опции за конфигурация в `nx.json` включват:

• `projects`: Дефинира проектите в работното пространство и тяхната конфигурация, като например тяхната основна директория и цели на изграждане.
• `tasksRunnerOptions`: Конфигурира инструмента за изпълнение на задачи, който е отговорен за изпълнението на задачи и кеширането на техните резултати.
• `affected`: Конфигурира как Nx определя кои проекти са засегнати от промяна.

Пример за `nx.json`:

{
  "npmScope": "my-org",
  "affected": {
    "defaultBase": "main"
  },
  "implicitDependencies": {
    "package.json": {
      "dependencies": "*",
      "devDependencies": "*"
    },
    ".eslintrc.json": "*"
  },
  "tasksRunnerOptions": {
    "default": {
      "runner": "nx-cloud",
      "options": {
        "cacheableOperations": ["build", "lint", "test", "e2e"],
        "accessToken": "...",
        "canTrackAnalytics": false,
        "showUsageWarnings": false
      }
    }
  },
  "targetDefaults": {
    "build": {
      "dependsOn": ["^build"],
      "inputs": ["production", "default"],
      "outputs": ["{projectRoot}/dist"]
    }
  },
  "namedInputs": {
    "default": ["{projectRoot}/**/*", "!{projectRoot}/dist/**/*", "!{projectRoot}/tmp/**/*"],
    "production": ["!{projectRoot}/**/*.spec.ts", "!{projectRoot}/**/*.spec.tsx", "!{projectRoot}/**/*.spec.js", "!{projectRoot}/**/*.spec.jsx"]
  },
  "generators": {
    "@nrwl/react": {
      "application": {
        "style": "css",
        "linter": "eslint",
        "unitTestRunner": "jest"
      },
      "library": {
        "style": "css",
        "linter": "eslint",
        "unitTestRunner": "jest"
      },
      "component": {
        "style": "css"
      }
    },
  }
}

Lerna срещу Nx: Кой да изберете?

И Lerna, и Nx са отлични инструменти за управление на frontend monorepos, но те се грижат за малко по-различни нужди. Ето сравнение, което да ви помогне да изберете правилния за вашия проект:

Характеристика	Lerna	Nx
Фокус	Управление на пакети	Система за изграждане и оркестрация на задачи
Инкрементални компилации	Ограничени (изисква външни инструменти)	Вградени и силно оптимизирани
Кеширане на изчисленията	Не	Да
Генериране на код	Не	Да
Екосистема от плъгини	Ограничена	Обширна
Крива на обучение	По-ниска	По-висока
Сложност	По-проста	По-сложна
Случаи на употреба	Проекти, фокусирани основно върху управлението и публикуването на npm пакети.	Големи и сложни проекти, изискващи оптимизирано време за компилиране, генериране на код и цялостна система за изграждане.

Изберете Lerna, ако:

• Основно трябва да управлявате и публикувате npm пакети.
• Вашият проект е сравнително малък до среден по размер.
• Предпочитате по-прост инструмент с по-ниска крива на обучение.
• Вече сте запознати с npm и Yarn.

Изберете Nx, ако:

• Имате нужда от оптимизирано време за компилиране и инкрементални компилации.
• Искате възможности за генериране на код.
• Изисквате цялостна система за изграждане с оркестрация на задачи.
• Вашият проект е голям и сложен.
• Готови сте да инвестирате време в изучаването на по-мощен инструмент.

Можете ли да използвате Lerna с Nx?

Да, Lerna и Nx могат да бъдат използвани заедно. Тази комбинация ви позволява да използвате възможностите за управление на пакети на Lerna, като същевременно се възползвате от оптимизираната система за изграждане и оркестрация на задачи на Nx. Nx може да бъде конфигуриран като инструмент за изпълнение на задачи за Lerna, предоставяйки инкрементални компилации и кеширане на изчисленията за пакетите, управлявани от Lerna.

Най-добри практики за управление на Frontend Monorepo

Независимо дали ще изберете Lerna или Nx, следването на най-добрите практики е от решаващо значение за успешното управление на frontend monorepo:

• Създайте ясна структура на проекта: Организирайте проектите си логично и последователно. Използвайте ясна конвенция за именуване на пакети и библиотеки.
• Наложете последователни стандарти за кодиране: Използвайте линтери и форматьори, за да осигурите последователен стил на кодиране във всички проекти. Инструменти като ESLint и Prettier могат да бъдат интегрирани във вашия работен процес.
• Автоматизирайте процесите на изграждане и тестване: Използвайте CI/CD тръбопроводи, за да автоматизирате процесите на изграждане, тестване и внедряване. Могат да се използват инструменти като Jenkins, CircleCI и GitHub Actions.
• Внедрете прегледи на код: Провеждайте задълбочени прегледи на кода, за да осигурите качество на кода и поддръжка. Използвайте заявки за изтегляне и инструменти за преглед на код.
• Наблюдавайте времето за компилиране и производителността: Проследявайте времето за компилиране и показателите за производителност, за да идентифицирате тесните места и областите за подобрение. Nx предоставя инструменти за анализ на производителността на изграждането.
• Документирайте структурата и процесите на вашето Monorepo: Създайте ясна документация, която обяснява структурата на вашето monorepo, използваните инструменти и технологии и работните потоци за разработка.
• Приемете конвенционални коммитове: Използвайте конвенционални коммитове, за да автоматизирате процесите на версииране и издаване. Lerna поддържа конвенционални коммитове извън кутията.

Заключение

Frontend monorepos предлагат значителни предимства за управлението на големи и сложни проекти, включително споделяне на код, опростено управление на зависимости и подобрено сътрудничество. Lerna и Nx са мощни инструменти, които могат да ви помогнат ефективно да управлявате frontend monorepo. Lerna е чудесен избор за управление на npm пакети, докато Nx предоставя по-всеобхватна система за изграждане с разширени функции като инкрементални компилации и генериране на код. Като внимателно обмислите нуждите на вашия проект и следвате най-добрите практики, можете успешно да приемете frontend monorepo и да се възползвате от неговите предимства.

Не забравяйте да вземете предвид фактори като опита на вашия екип, сложността на проекта и изискванията за производителност, когато избирате между Lerna и Nx. Експериментирайте с двата инструмента и намерете този, който най-добре отговаря на вашите специфични нужди.

Успех с вашето monorepo пътешествие!